<template>
  <div>
    <div class="select-block" :style="{height: height + 'px'}">
      <div class="select-list">
        <div class="select-title" v-if="useTitle">{{title}}</div>
        <div class="select-list-group" :style="{height: listHeight  + 'px'}">
          <div
            class="select-list-item"
            @click="selectItem(v)"
            :class="v.id === selected ? 'active' : ''"
            v-for="v in listData" :key="v.id">
            {{v.name}}
          </div>
        </div>
      </div>
      <div class="tool-list">
        <div class="tool-title">操作</div>
        <!-- like: <div class="tool-item"><icon-tip content="添加列表页规则" eleIcon="el-icon-plus"></icon-tip></div> -->
        <slot name="toolItem"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SiteRules',
  props: {
    title: {
      type: String,
      default: '列表'
    },
    useTitle: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 500
    },
    listData: {
      type: Array,
      /* eslint-disable */
      default: () => [{
          id: 1,
          name: 'test1'
        }, {
          id: 2,
          name: 'test2'
        }, {
          id: 3,
          name: 'test3'
        }, {
          id: 4,
          name: 'test4'
        }, {
          id: 5,
          name: 'test5'
        }, {
          id: 6,
          name: 'test6'
        }, {
          id: 7,
          name: 'test7'
        }, {
          id: 8,
          name: 'test8'
        }, {
          id: 9,
          name: 'test9'
        }, {
          id: 10,
          name: 'test10'
        }, {
          id: 11,
          name: 'test11'
        }, {
          id: 12,
          name: 'test12'
        }, {
          id: 13,
          name: 'test13'
        }, {
          id: 14,
          name: 'test14'
        }, {
          id: 15,
          name: 'test15'
        }, {
          id: 16,
          name: 'test16'
      }]
      /* eslint-enable */
    }
  },
  computed: {
    listHeight: function () {
      if (this.useTitle) {
        return this.height - 30
      } else {
        return this.height
      }
    }
  },
  data () {
    return {
      selected: ''
    }
  },
  methods: {
    selectItem (v) {
      this.selected = v.id
      this.$emit('selected', v)
    }
  }
}
</script>
<style lang="scss" scoped>
.select-block {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfdfdf;
  .select-list {
    width: 250px;
    border-right: 1px solid #dfdfdf;
    .select-title {
      padding: 5px 0;
      text-align: center;
      background: #dfdfdf;
    }
    .select-list-group {
      max-height: 456px;
      overflow-y: auto;
    }
    .select-list-item {
      padding: 5px;
      cursor: pointer;
      &:hover {
        background: #dfdfdf;
      }
      &.active {
        background: #fedf7b;
      }
    }
  }
  .tool-list {
    width: 25px;
    text-align: center;
    .tool-title {
      font-size: 12px;
      padding: 7px 0px;
    }
    .tool-item {
      margin: 5px 0;
    }
  }
}
</style>
